<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragments :: head(~{::title})">
    <title>归档 | Saw96x's Blog</title>
</head>
<body>
<!--<img class="ui fluid image m-background">-->
<!--导航-->
<nav th:replace="_fragments :: menu(4)"></nav>

<!--    中间内容-->
<div class="m-padded-tb-large m-opacity-mini m-container-small">
    <div class="ui container">
        <!--        header-->
        <div class="ui top attached padded segment m-shadow-small">
            <div class="ui middle aligned two column grid">
                <div class="column">
                    <h3 class="ui violet header">归档</h3>
                </div>
                <div class="right aligned column">
                    共 <h2 class="ui violet header m-inline-block m-text-thin" th:text="${blogCount}"> 114 </h2> 篇博客
                </div>
            </div>
        </div>
        <div th:each="item : ${archiveMap}">
            <h2 class="ui m-margin-tb-big center aligned header" th:text="${item.key}">2018</h2>
            <div class="ui m-shadow-small fluid vertical menu">
                <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="item"
                   th:each="blog : ${item.value}">
                <span>
                    <i class="circle teal icon"></i> <span th:text="${blog.title}">关于刻意练习</span>
                    <div class="ui violet basic left pointing m-padded-tb-small label"
                         th:text="${#dates.format(blog.updateTime,'MMMdd')}">9月03</div>
                </span>
                    <div class="ui red basic m-padded-tb-small label" th:text="${blog.flag}">原创</div>
                </a>
            </div>
        </div>

    </div>
</div>

<!--    底部-->
<footer th:replace="_fragments :: footer"></footer>

<th:block th:replace="_fragments :: script"></th:block>

<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<script crossorigin="anonymous" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT"
        src="https://lib.baomitu.com/jquery/3.3.1/jquery.min.js"></script>

<script>
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });
</script>
<script type="text/javascript" color="100,149,237" opacity='1' zIndex="-1" count="150"
        src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
</body>
</html>
